import React from 'react'
import { Button, Form, Input } from 'antd-mobile'
import useDao from '../../../hook/useDao'
import { getCodeApi } from '../../../api/deng'
import { getLoginApi } from '../../../api/deng'
import { useFD } from '../../../hook/useFD'
import { outdeng } from '../../../qie/slice/user'
import {useDispatch} from 'react-redux'
import { useNavigate } from 'react-router-dom'
function Myyzm() {
    const nav=useNavigate()
    const { fn, num, flag } = useDao()
    const [form] = Form.useForm()
    const fd=useFD()
    const diapth=useDispatch()

    const yzm=async()=>{
        try{
            //校验手机号是否合法
            const res2=await form.validateFields(['tel'])
            //校验通过后，封装并调用发送验证码的接口
            const {data:res}=await getCodeApi(res2.tel)
            //回显
            form.setFieldValue('telCode',res.telCode)
        }
        catch{
            console.log('手机格式不正确')
        }
    }


    const onFromfinsh=async(values)=>{ 
        const {data:res}=await getLoginApi(values)
        console.log(res);
        localStorage.setItem('token',res.token)
        diapth(outdeng(res))
        nav('/')
    }

    return (
        <div>
            <Form layout='horizontal' mode='card'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        登录
                    </Button>
                }
                form={form}
                onFinish={fd(onFromfinsh)}
            >

                <Form.Item label='手机号'
                    style={{ '--prefix-width': '86px' }}
                    name='tel'
                    rules={[
                        {
                            required: true, message: '请输入手机号'
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'
                        }
                    ]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>

                <Form.Item label='短信验证码'
                    style={{ '--prefix-width': '86px' }}
                    name='telCode'
                    rules={[
                        {
                            required: true, message: '请输入验证码'
                        },
                    ]}
                    extra={<Button fill='none'
                        onClick={yzm}
                        disabled={flag}
                    >
                        {flag ? `(${num}s)获取验证码` : '获取验证码'}
                    </Button>
                    }
                >

                    <Input placeholder='请输入' />
                </Form.Item>

            </Form>


        </div>
    )
}

export default Myyzm
